<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>忘记密码 - 好运网</title>
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
</head>

<body>
<div th:include="header::header"></div>
<div class="container">
    <div class="find_pwd_box">
        <div class="find_pwd_step">
            <div class="find_pwd_line">
                <div class="on">
                    <span>1</span>
                    <p>填写验证码</p>
                </div>
                <div>
                    <span>2</span>
                    <p>修改密码</p>
                </div>
                <div>
                    <span>3</span>
                    <p>完成</p>
                </div>
            </div>
        </div>
        <div class="find_pwd_step_one">

            <div class="find_pwd_iphone">
                <form id="iphone_form" method="post">
                    <div class="from_Centered">
                        <div class="setting_pwd_box_row" style="margin-top:10px;">
                            <span style="margin-right:64px;">&nbsp;</span>
                            账户名：
                            <input type="text" style="width:200px" name="userName" class="r_inptut inputwd300"/>
                        </div>
                        <div class="setting_pwd_box_row">
                            <span style="margin-right:50px;">&nbsp;</span>
                            真实姓名：
                            <input type="text" style="width:200px" name="realName" class="r_inptut inputwd300"/>
                        </div>
                    </div>
                    <h3>
                        <i></i>
                        手机找回密码
                    </h3>
                    <div class="from_Centered">
                        <div class="setting_pwd_box_row">
                            手机号码：
                            <input type="text" id="setting_phone_box_phonenumber" name="phone"
                                   class="r_inptut inputwd300"/>
                        </div>
                        <div class="setting_pwd_box_row">
                            &nbsp;&nbsp;&nbsp;&nbsp;验证码：
                            <input type="text" name="verifyCode" class="r_inptut inputwd300"
                                   style="width:177px;vertical-align: middle;"/>
                            <span class="setting_phone_tip">
                                <div id="iphoneCode" style="cursor:pointer;">获取验证码</div>
                            </span>
                        </div>
                        <div class="setting_pwd_box_row" style="margin-top:15px;">
                            <button class="as_but inputwd300" id="iphoneNextStepButton" type="button">下一步</button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="find_pwd_email">
                <form id="email_form" method="post">
                    <div class="find_pwd_email">
                        <div class="from_Centered">
                            <div class="setting_pwd_box_row" style="margin-top:10px;">
                                <span style="margin-right:64px;">&nbsp;</span>
                                账户名：
                                <input type="text" style="width:200px" name="userName" class="r_inptut inputwd300"/>
                            </div>
                            <div class="setting_pwd_box_row">
                                <span style="margin-right:50px;">&nbsp;</span>
                                真实姓名：
                                <input type="text" style="width:200px" name="realName" class="r_inptut inputwd300"/>
                            </div>
                        </div>
                        <h3>
                            <i></i>
                            邮箱找回密码
                        </h3>

                        <div class="from_Centered">
                            <div class="setting_pwd_box_row">
                                邮箱账号：
                                <input type="email" name="email" class="r_inptut inputwd300"/>
                            </div>
                            <div class="setting_pwd_box_row">
                                &nbsp;&nbsp;&nbsp;&nbsp;验证码：
                                <input name="verifyCode" type="text" class="r_inptut inputwd300"
                                       style="width:177px;vertical-align: middle;"/>
                                <span class="setting_phone_tip">
                                    <div id="emailCode" style="cursor:pointer;">获取验证码</div>
                                </span>
                            </div>
                            <div class="setting_pwd_box_row" style="margin-top:15px;">
                                <button class="as_but inputwd300" id="emailNextStepButton" type="button">下一步</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
</div>
</div>
<div th:include="footer::footer"></div>
<div th:include="right::right"></div>
</body>
</html>
<link rel="stylesheet" href="/js/loading/loading.css">
<script src="/js/loading/loading.js"></script>
<script>
    var jiuXiuLoad = new Loading();
    jiuXiuLoad.init();

    $(function () {
        $("#iphoneNextStepButton").click(function () {
            var iphone_form = $("#iphone_form");
            var userName = iphone_form.find("input[name='userName']").val();
            var realName = iphone_form.find("input[name='realName']").val();
            var phoneNumber = iphone_form.find("input[name='phone']").val();
            var verifyCode = iphone_form.find("input[name='verifyCode']").val();
            if (userName.length == 0) {
                alertWorning("用户名不能为空!");
                return;
            }
            if (realName.length == 0) {
                alertWorning("真实姓名不能为空!");
                return;
            }
            if (phoneNumber.length == 0) {
                alertWorning("手机号码不能为空!");
                return;
            }
            if (verifyCode.length == 0) {
                alertWorning("验证码不能为空!");
                return;
            }

            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/forgotFristStepByPhone",
                data: $("#iphone_form").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                timeWait = 60;
                if (msg.status == 'success') {
                    window.location.href = msg.data;
                } else {
                    alertWorning(msg.data)
                }
            });
        });

        var timeWait = 60;

        function setCodeTime(obj) {
            if (timeWait == 0) {
                $("#" + obj).html("获取验证码");
                timeWait = 60;
            } else {
                $("#" + obj).html(timeWait + "秒");
                timeWait--;
                setTimeout(function () {
                    setCodeTime(obj);
                }, 1000)
            }
        }

        $("#iphoneCode").click(function () {
            if (timeWait == 60) {
                var iphone_form = $("#iphone_form");
                var userName = iphone_form.find("input[name='userName']").val();
                var realName = iphone_form.find("input[name='realName']").val();
                var phoneNumber = iphone_form.find("input[name='phone']").val();

                if (userName.length == 0) {
                    alertWorning("用户名不能为空!");
                    return;
                }
                if (realName.length == 0) {
                    alertWorning("真实姓名不能为空!");
                    return;
                }
                if (phoneNumber.length == 0) {
                    alertWorning("手机号码不能为空!");
                    return;
                }

                jiuXiuLoad.start();
                $.ajax({
                    method: "POST",
                    url: "/api/forgotSendPhoneCode",
                    data: $("#iphone_form").serializeArray(),
                    dataType: "json"
                }).done(function (msg) {
                    jiuXiuLoad.stop();
                    if (msg.status == 'success') {
                        timeWait = 60;
                        setCodeTime("iphoneCode");
                        alertGood('验证码已发送!');
                    } else {
                        alertWorning(msg.data)
                    }
                });
            } else {
                alertGood('验证码已发送!');
            }
        });


        var timeWaitEmail = 60;

        function setCodeTimeEmail(obj) {
            if (timeWaitEmail == 0) {
                $("#" + obj).html("获取验证码");
                timeWaitEmail = 60;
            } else {
                $("#" + obj).html(timeWaitEmail + "秒");
                timeWaitEmail--;
                setTimeout(function () {
                    setCodeTime(obj);
                }, 1000)
            }
        }

        $("#emailCode").click(function () {
            if (timeWaitEmail == 60) {
                var email_form = $("#email_form");
                var userName = email_form.find("input[name='userName']").val();
                var realName = email_form.find("input[name='realName']").val();
                var email = email_form.find("input[name='email']").val();

                if (userName.length == 0) {
                    alertWorning("用户名不能为空!");
                    return;
                }
                if (realName.length == 0) {
                    alertWorning("真实姓名不能为空!");
                    return;
                }
                if (email.length == 0) {
                    alertWorning("邮箱地址不能为空!");
                    return;
                }

                jiuXiuLoad.start();
                $.ajax({
                    method: "POST",
                    url: "/api/forgotSendEmailCode",
                    data: $("#email_form").serializeArray(),
                    dataType: "json"
                }).done(function (msg) {
                    jiuXiuLoad.stop();
                    if (msg.status == 'success') {
                        timeWaitEmail = 60;
                        setCodeTimeEmail("emailCode");
                        alertGood('验证码已发送!');
                    } else {
                        alertWorning(msg.data)
                    }
                });
            } else {
                alertGood('验证码已发送!');
            }
        });

        $("#emailNextStepButton").click(function () {
            var iphone_form = $("#email_form");
            var userName = iphone_form.find("input[name='userName']").val();
            var realName = iphone_form.find("input[name='realName']").val();
            var email = iphone_form.find("input[name='email']").val();
            var verifyCode = iphone_form.find("input[name='verifyCode']").val();
            if (userName.length == 0) {
                alertWorning("用户名不能为空!");
                return;
            }
            if (realName.length == 0) {
                alertWorning("真实姓名不能为空!");
                return;
            }
            if (email.length == 0) {
                alertWorning("邮箱地址不能为空!");
                return;
            }
            if (verifyCode.length == 0) {
                alertWorning("验证码不能为空!");
                return;
            }
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/forgotFristStepByEmail",
                data: $("#email_form").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                timeWait = 60;
                if (msg.status == 'success') {
                    window.location.href = msg.data;
                } else {
                    alertWorning(msg.data)
                }
            });
        });

    });

</script>
